<script setup lang='ts'>
import { reactive, computed } from 'vue';
import { Search, More, Edit, Delete, Refresh } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import baseAPI from '../../utils/api';
// 定义数据
const Data = reactive({
    mainSearch: '',
    dialogSearch: '',
    showDialog: false,
    tableData: [{
        'showName': "",
        'name': "",
        'recogntion_date': "",
        'participate_date': "",
        'hometown': "",
        'employment_type': ""
    }],
    dialogExpend: {
        "id": '',
        'showName': "",
        'name': "",
        'recogntion_date': "",
        'participate_date': "",
        'hometown': "",
        'employment_type': ""
    },
    dialogExpendTem: {
        "id": '',
        'showName': "",
        'name': "",
        'recogntion_date': "",
        'participate_date': "",
        'hometown': "",
        'employment_type': ""
    },
    showAddEdit: true,
    expendOptions: [
        { label: '', value: '' }
    ]
})
const dialogData = reactive({
    employmentOptions: [{ label: '在职在编', value: '在职在编' },
    { label: '在职不在编', value: '在职不在编' }],

})


// 定义函数
// 添加
const addData = () => {
    Data.showAddEdit = true
    Data.showDialog = true
}
const addItem = async () => {
    let msg = ''
    if (Data.dialogExpend.name == '') {
        ElMessage.error('你没有选择教职工信息，请先选择教职工信息！')
    } else {
        try {
            const te = await baseAPI.teacherExpendAPI.getAll({ name: Data.dialogExpend.name })
            await baseAPI.teacherExpendAPI.alt(te.data[0].id, Data.dialogExpend)
            msg = '数据修改成功！'
        }
        catch (err) {
            await baseAPI.teacherExpendAPI.add(Data.dialogExpend)
            msg = '没有查询到数据增加成功！'
        }
    }
    Data.dialogExpend = Data.dialogExpendTem
    getAllData()
    Data.showDialog = false
    ElMessage.error(msg)
}
// 编辑
const editDate = (row: any) => {
    Data.dialogExpend = row
    Data.showAddEdit = false
    Data.showDialog = true
}
const editItem = async () => {
    await baseAPI.teacherExpendAPI.alt(Data.dialogExpend.id, Data.dialogExpend)
    Data.dialogExpend = Data.dialogExpendTem
    Data.showDialog = false
    ElMessage({
        message: '数据修改成功！',
        type: 'success'
    })
}
// 删除
const delData = async (row: any) => {
    await baseAPI.teacherExpendAPI.del(row.id)
    getAllData()
    ElMessage.error('数据删除成功')
}
//  添加加的教职信息搜索
const setteacherbase = async () => {
    let params = {
        search: Data.mainSearch
    }
    const teBase = await baseAPI.teacherBaseAPI.getAll(params)
    Data.expendOptions = teBase.data.map((res: any) => {
        return {
            label: res.name,
            value: res.id,
            showname: res.name
        }
    })
    Data.mainSearch = ''
}
const a = computed(() => {
    Data.expendOptions.filter((res: any) => {
        if (res.value == Data.dialogExpend.name) {
            Data.dialogExpend.showName = res.label
            return true
        }
    })
    return 'ok'
})

// 主页面信息搜索
const mainsearch = async () => {
    let params = {
        search: Data.mainSearch
    }
    Data.tableData = []
    const teBase = await baseAPI.teacherBaseAPI.getAll(params)
    teBase.data.map(async (res: any) => {
        const expend = await baseAPI.teacherExpendAPI.getAll({ name: res.id })
        Data.tableData.push(expend.data[0])
        return ''
    })
    Data.mainSearch = ""
}
// 表单函数
// 取消
const cancelItem = () => {
    Data.dialogExpend = Data.dialogExpendTem
    Data.showDialog = false
}

const getAllData = async () => {
    const teExpend = await baseAPI.teacherExpendAPI.getAll()
    Data.tableData = teExpend.data
    ElMessage({
        message: '数据加载成功！',
        type: 'success'
    })
}
getAllData()
const getOneItem = async (id: any) => {
    const oneExpend = await baseAPI.teacherBaseAPI.getOne(id)
    console.log(oneExpend, 'one')
}
</script>
<template>
    <!-- 标题 -->
    <div class="title">教师拓展信息管理</div>
    <div class="nav">
        <div>
            <el-input v-model="Data.mainSearch" style="max-width: 600px" placeholder="请输入身份证、姓名、地址信息"
                class="input-with-select">
                <template #prepend>
                    <el-button>搜索教师信息</el-button>
                </template>
                <template #append>
                    <el-button :icon="Search" @click="mainsearch" />
                </template>
                <el-button :icon="Refresh" @click="getAllData" />
            </el-input>
        </div>
        <div>
            <el-button :icon="Refresh" @click="getAllData" />
        </div>
        <div>
            <el-button type="success" round @click='addData'>新增</el-button>
            <el-button type="info" round>导入</el-button>
        </div>
    </div>
    <!-- 表格数据显示 -->
    <div>
        <el-table :data="Data.tableData" stripe style="width: 100%" height="660" border>
            <el-table-column type="index" label="序号" width="55" />
            <el-table-column prop="showName" label="姓名" />
            <el-table-column prop="recogntion_date" label="认定出生日期" />
            <el-table-column prop="participate_date" label="参工日期" />
            <el-table-column prop="hometown" label="籍贯" />
            <el-table-column prop="employment_type" label="在职类型" />
            <el-table-column fixed="right" label="操作" width="130">
                <template #default="scope">
                    <el-button :icon="More" size="small" circle />
                    <el-button type="primary" :icon="Edit" size="small" circle @click="editDate(scope.row)" />
                    <el-button type="danger" :icon="Delete" size="small" circle @click="delData(scope.row)" />
                </template>
            </el-table-column>
            <template #empty>
                <div style="text-align: center; padding: 20px;color: red;">
                    没有找到数据
                </div>
            </template>
        </el-table>
    </div>
    <!-- 分页 -->
    <div>分页</div>
    <!-- 对话框 -->
    <div>

        <el-dialog v-model="Data.showDialog" title="教师个人明细信息" width="80%" center>
            <div class="base-align" v-if="Data.showAddEdit">
                <el-input v-model="Data.mainSearch" style="max-width: 400px" placeholder="请输入身份证、姓名、地址信息"
                    class="input-with-select">
                    <template #prepend>
                        <el-button>搜索教师信息</el-button>
                    </template>
                    <template #append>
                        <el-button :icon="Search" @click="setteacherbase" />
                    </template>
                </el-input>
                <input type="text" v-model="a" hidden>
                <el-select v-model="Data.dialogExpend.name" clearable placeholder="请选择用户！" style="width: 240px">
                    <el-option v-for="item in Data.expendOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
            <div class="base-align">
                <el-form label-width="auto" :inline="true" :model="Data.dialogExpend" style="max-width: 600px">
                    <el-form-item label="姓名">
                        <el-input v-model="Data.dialogExpend.showName" disabled />
                    </el-form-item>
                    <el-form-item label="参工日期">
                        <el-date-picker v-model="Data.dialogExpend.participate_date" type="date" placeholder="请选择日期"
                            value-format="YYYY-MM-DD" style="width: 150px;" />
                    </el-form-item>
                    <el-form-item label="籍贯">
                        <el-input v-model="Data.dialogExpend.hometown" />
                    </el-form-item>
                    <el-form-item label="认定出生日期">
                        <el-date-picker v-model="Data.dialogExpend.recogntion_date" type="date" placeholder="请选择日期"
                            value-format="YYYY-MM-DD" style="width: 150px;" />
                    </el-form-item>
                    <el-form-item label="在职类型">
                        <el-select v-model="Data.dialogExpend.employment_type" placeholder="请选择类型"
                            style="width: 190px;">
                            <el-option v-for="item in dialogData.employmentOptions" :key="item.value"
                                :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelItem">取消</el-button>
                    <el-button type="primary" @click="addItem" v-if="Data.showAddEdit">
                        新增
                    </el-button>
                    <el-button type="primary" @click="editItem" v-if="!Data.showAddEdit">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<style scoped>
.title {
    background-color: #fff;
    height: 40px;
    text-align: center;
    font-size: 25px;
    border: #1e1e1e;
}

.nav {
    margin: 10px 0;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
}

.base-align {
    margin-top: 15px;
    /* background-color: #d3d3d3; */
    display: flex;
    justify-content: center;
}
</style>